/**
 * Created by www.it666.com.
 */
// (function (window) {
//
//     // 2. 动态创建元素
//     autoCreateImg();
//     // 3. 瀑布流的局部
//     setTimeout(function () {
//         waterFull("dom_pull", "box");
//     }, 200);
//     // 4. 窗口的滚动
//     window.onscroll = function () {
//         // 4.1 瀑布流加载新图片的条件
//         if(checkWillLoadImage()){
//             autoCreateImg();
//             waterFull("dom_pull", "box");
//         }
//
//
//         // 4.4. 滚回顶部
//         $('elevator').onclick = function () {
//             buffer(document.documentElement, {scrollTop: 0}, null);
//         }
//     };
//     // 5. 监听点击按钮
//     $("login").onclick = function () {
//        $("mask").style.display = "block";
//     };
//     $("close_btn").onclick = function () {
//         $("mask").style.display = "none";
//     };
//
// })(window);



/**
 * 自动创建图片
 */
function autoCreateImg(result) {
    // 1.1 数据
    var json = [result], pic, htmlStr;

    // 1.2 遍历
    for (var i = 0; i < 30; i++) {
        // 1.2.0 获取父标签的文本
        str = $("dom_pull").innerHTML;

        // 1.2.1 取出图片的地址和文字
        pic = json[i].pic;

        // 1.2.2 创建字标签
        htmlStr = "<div class='box'>" +
            "<div class='pic'>" +
            "<img src=" + pic + " alt=''>" +
            "<div class='cover'></div>" +
            "</div>" +
            "<div class='btn-box'>" +
            "<a href='' class='collect'>采集</a>" +
            "<a href='' class='like'>" +
            "<span class='heart'></span>" +
            "</a></div></div>";

        // 1.2.3 拼接
        str += htmlStr;
        $("dom_pull").innerHTML = str;

        // 1.2.4 绑定事件
        var wrapBox = $("dom_pull").getElementsByClassName("box");
        var wrappic = $("dom_pull").getElementsByClassName("pic");
        for (var j = 0; j < wrapBox.length; j++) {
            wrapBox[j].onmouseover = function () {
                 this.childNodes[2].style.display = "block";
            };

            wrapBox[j].onmouseout = function () {
                this.childNodes[2].style.display = "none";
            };

            wrappic[j].onmouseover = function () {
                this.childNodes[1].style.display = "block";
            };

            wrappic[j].onmouseout = function () {
                this.childNodes[1].style.display = "none";
            }
        }
    }
}



function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}
